<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实现简单图片上传，多张图片上传</title>
    <style>
        .uploadInfo{
            width:19%;
            margin-right:1%;
            height:200px;
            float:left;
            overflow: hidden;
            border:1px solid #cecece;
            box-sizing: border-box;
        }
        .uploadInfoRele{
            width:100%;
            height:100%;
            overflow: hidden;
            padding:5px;
            box-sizing: border-box;
            position: relative;
        }
        .imgPreviewContent{
            width:100%;
            height:12vw;
            overflow: hidden;
        }
        .imgPreview{
            width:100%;
            height:100%;
            display: block;
        }
        .uploadInfo p{
            margin:0;
            line-height:18px;
            font-size:12px;
        }
        .uploadInfoRemove{
            position: absolute;
            right:5px;
            top:5px;
            color:#ffffff;
            font-size:12px;
            cursor: pointer;
            display:none;
            background:rgba(0,0,0,0.5);
            border-radius: 2px;
            padding:2px;
        }
        .uploadInfoRele:hover .uploadInfoRemove{
            display: block;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="content">
        <form id="frmTmp">
            <fieldset>
                <legend>选择文件：</legend>
                <input type="file" name="fileUpLoad" id="fileUpLoad" ref="file1" @change="uploadImg($event)" multiple="multiple"/>
            </fieldset>
        </form>
        <div class="uploadInfo" v-for="(v,index) in imgSrc">
            <div class="uploadInfoRele">
                <div class="uploadInfoRemove" @click="removeImg(index)">删除</div>
                <!-- 要限制上传文件类型，使用：accept="text/plain" accept="image/jpeg" 属性 -->
                <div class="imgPreviewContent">
                    <img class="imgPreview" :src="v.src" :alt="v.fileName"/>
                </div>
                <p>文件名称：{{v.fileName}}</p>
                <p>文件类型：{{v.fileType}}</p>
                <p>文件大小：{{v.fileSize}}</p>
                <p>文件日期：{{v.fileDate}}</p>
            </div>
        </div>
    </div>

    <script src="../date/dateUtils.js"></script>
    <script>
        var uploadImg = new Vue({
            el: "#content",
            data: {
                fileinfo:null,     //文件上传状态
                imgSrc:[],    //上传多张图片内容，用于预览
            },
            mounted(){

            },
            methods: {
                //初始化获取当前年月，用于数据初始化
                initYearAndMonth(timpstamp) {
                    let thisDate = dateUtils.timeStamp(timpstamp);
                    let thisDateString = dateUtils.dateObj(thisDate);
                    return thisDateString;
                },
                //文件验证
                rexUploadFile(file){
                    //验证是否是图片
                    var type = /image.*/;   //设定正则表达式 image/jpeg
                    //var type = /text.*/;   //判断文本类型 text/plain
                    if(!file.type.match(type)){
                        return '上传的不是图片，支持jpg、png、gif等图片格式';
                    }
                    return '';
                },
                //清空上传信息
                clearFileInfo(){
                    this.imgSrc = [];
                    this.fileinfo = null;
                },
                //图片预览，上传回调函数
                imgPreview(file){
                    if (typeof FileReader == "undefiend") {  //如果FileReader对象为未声明
                        alert("您的浏览器不支持图片预览");
                        return;
                    } else {
                        //以数据URL的方式读取文件内容
                        var reader = new FileReader();   
                        //图片预览，用reader的readAsDataURL()方法获取每个图片的内容
                        reader.readAsDataURL(file);   

                        //文件预览，用reader的readAsText()方法获取每个文件的内容
                        //如果出现文件乱码现象，是utf8格式文本所致，使用reader.readAsText(file, 'GB2312'); 即可  
                        //reader.readAsText(file);   

                        //当文件开始加载时触发的回调函数，reader对象在加载时，返回内容
                        reader.onload = (e) => {  
                            //e.target.result用于获取图片路径
                        }

                        //当文件开始读取时触发的回调函数
                        reader.onloadstart = () => {   
                            this.fileinfo = "文件开始读取 ";
                        }
                        //当文件正在读取中触发的回调函数
                        reader.onprogress = () => {   
                            this.fileinfo = "数据正在读取中…… ";
                        }
                        //当文件读取结束后触发的回调函数
                        reader.onloadend =  (e) => {   
                            this.fileinfo = "文件上传完毕 ";
                                                            
                            //e.target.result用于获取图片路径
                            this.imgSrc.push({
                                src:e.target.result,
                                fileName:file.name,
                                fileType:file.type.replace('image/',''),
                                fileSize:file.size,
                                fileDate:this.initYearAndMonth(file.lastModified)
                            });
                        }
                        //当文件读取错误时触发的回调函数
                        reader.onerror = (e) => {   
                            /*
                                e.target.error.name 为上传错误名称，可能为如下：
                                    NOT_FOUND_ERR       文件无法找到或源文件已被修改
                                    SECURITY_ERR        由于安全的考虑，无法获取数据文件
                                    ABORT_ERR           触发了abort事件，终止文件读取的过程
                                    NOT_READABLE_ERR    由于权限的原因，不能获取数据文件
                                    ENCODING_ERR        读取的文件太大，超出读取时地址的限制
                            */
                            this.fileinfo = "文件失败！ 错误状态："+e.target.error.name;
                        }
                    }
                },
                //图片上传
                uploadImg() {

                    
                    let files = this.$refs.file1.files;
                    for(let file in files){
                        //图片预览，上传回调函数
                        if(!isNaN(file)){
                            //文件验证
                            let rex1 = this.rexUploadFile(files[file]);
                            if(rex1 != ''){
                                alert(rex1);
                            }else{
                                this.imgPreview(files[file]);
                            }
                        }
                    }


                    //清空上传信息
                    //this.clearFileInfo();
                },
                //删除图片
                removeImg(index){
                    this.imgSrc.splice(index, 1);
                }
            }
        });
    </script>
</body>

</html>